import React, { useState, useEffect } from 'react';
import { Tag, Space, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './InterestTags.css';

interface InterestTag {
    id: string;
    name: string;
    category: string;
}

interface InterestTagsProps {
    selectedTags?: string[];
    onTagsChange?: (tags: string[]) => void;
    maxSelect?: number;
}

const InterestTags: React.FC<InterestTagsProps> = ({
    selectedTags = [],
    onTagsChange,
    maxSelect = 5
}) => {
    const [allTags, setAllTags] = useState<InterestTag[]>([]);
    const [selected, setSelected] = useState<string[]>(selectedTags);

    // 模拟获取标签数据
    useEffect(() => {
        // TODO: 从API获取标签数据
        const mockTags: InterestTag[] = [
            { id: '1', name: '运动', category: '体育' },
            { id: '2', name: '音乐', category: '艺术' },
            { id: '3', name: '美食', category: '生活' },
            { id: '4', name: '旅行', category: '生活' },
            { id: '5', name: '摄影', category: '艺术' },
            { id: '6', name: '读书', category: '文化' },
            { id: '7', name: '电影', category: '娱乐' },
            { id: '8', name: '宠物', category: '生活' },
        ];
        setAllTags(mockTags);
    }, []);

    const handleTagClick = (tagId: string) => {
        const newSelected = selected.includes(tagId)
            ? selected.filter(id => id !== tagId)
            : selected.length < maxSelect
                ? [...selected, tagId]
                : selected;

        setSelected(newSelected);
        onTagsChange?.(newSelected);
    };

    return (
        <div className="interest-tags">
            <div className="tags-header">
                <h3>选择你的兴趣标签</h3>
                <span className="tags-limit">最多选择{maxSelect}个标签</span>
            </div>
            <Space wrap className="tags-container">
                {allTags.map(tag => (
                    <Tag
                        key={tag.id}
                        color={selected.includes(tag.id) ? '#FF7D00' : 'default'}
                        onClick={() => handleTagClick(tag.id)}
                        className="interest-tag"
                    >
                        {tag.name}
                    </Tag>
                ))}
            </Space>
            <Button
                type="primary"
                icon={<PlusOutlined />}
                className="add-tag-button"
            >
                添加自定义标签
            </Button>
        </div>
    );
};

export default InterestTags; 